<template>
	<view class="AppraiseItem" >
			 <view  @tap="detail(item)">
				<view style="display: flex;align-items: center;font-size: 28rpx;justify-content: space-between;">
					<view  style="display: flex;align-items: center;font-size: 28rpx;color: #666;">
						<image v-if="!item.avatar"
						src="https://dn-coding-net-production-pp.codehub.cn/270e73de-2548-406b-9e1c-c0c8481dff90.png"
						class="u-nickname__img" ></image>
					<image v-else :src="ossUrl +item.avatar" class="u-nickname__img" ></image>
					{{item.nickname}}
					</view>
					<view><text class="time" v-if="item.createTime">{{item.createTime}}</text></view>
				</view> 
				<text class="title">{{item.releaseContent}}</text> 
				 
			 </view>
			 <view class="group"  @tap="detail(item)">
					<view class="groupImg" v-for="(img,i) in item.releaseImgs" :key="i">
						<tui-lazyload-img :disconnect="false" width="100%" height="148rpx"  :src="ossUrl+img"></tui-lazyload-img>
						<!-- <image  :src="ossUrl+img" lazy-load="true" :loading="loading"></image> -->
					</view>
				</view>
			 <view class="thorui-flex__between"> 
					 
					 
					<view class="gps">
						<tui-icon v-show="item.address"  color="#666" name="gps" :size="24" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
						<text style="font-size: 24rpx;color: gray;">{{ item.address }}</text>
					</view>
					 
					<view style="display: flex;align-items: center;font-size: 28rpx;color: gray;" >
						<tui-icon :name="like==1?'like':'like-fill'" :color="like==1?'':'#2FD7D3'" size="30rpx" margin="0 6rpx 0 0"></tui-icon>
						<text :style="like==1?'':'color: #2FD7D3'">{{likeNum}}</text>
					</view>
			</view> 
	 </view>
</template>

<script>
	import {getMyAttentionList,collectDynamic} from "@/http/api/index/index.js"
	import {hideDynamic} from "@/http/api/dynamic/dynamic.js" 
	import Cache from '@/utils/cache'
	export default {
		name: 'DynamicItem',
		emits: ['clickDetail','delDynamic'],
		props: {
			//数据obj
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			//oss
			ossUrl:{
				type: String,
				default:''
			}
		},
		data() {
			return {
				like: 1,// 当前用户是否收藏
				likeNum: 0,// 收藏数量
				dynamicStatus: true, // 动态状态（true 显示；false 隐藏）
				loading: 'lazy' // 图片加载方式
			};
		},
		watch: {
			item: {
				handler(newVal, oldVal) {
					this.like = newVal.isCollection;
					this.likeNum = newVal.quantity;
					this.dynamicStatus = newVal.status==0?true:false;// 状态：0显示，1隐藏，2待审核，3驳回
				},
				deep: true
			}
		},
		created() {
			this.like = this.item.isCollection;
			this.likeNum = this.item.quantity;
			this.dynamicStatus = this.item.status==0?true:false;// 状态：0显示，1隐藏，2待审核，3驳回
		},
		methods: {  
			detail(dynamic) {
				this.$emit("clickDetail", {
					dynamicId:dynamic.id
				})
			},
			del(dynamic) {
				this.$emit("delDynamic", {
					dynamicId:dynamic.id
				})
			},
			// 收藏、取消收藏动态
			likeTap() {
				const token =Cache.get('access_token')
				if(token){
					this.like = this.like==1 ? 1 : 0;
					this.likeNum = this.like==0 ? ++this.likeNum : --this.likeNum;
					this.setUpdateLikes()
				}else{
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			setUpdateLikes(){
				collectDynamic({
					id: this.item.id,
					userId: Cache.get("userId"),
					queryType: this.like?"1":"2" //queryType  1收藏，2取消
				}).then(res => {
					if (res.code != 200) {
						 this.$utils.toast(res.msg);
					}
				}).catch(res => {
					this.$utils.toast(res);
				})
			},
			// 隐藏显示动态
			hideDynamicTap(dynamic){
				// 状态：0显示，1隐藏，2待审核，3驳回
				let status= this.dynamicStatus?'1':'0';
				this.dynamicStatus = !this.dynamicStatus;
				hideDynamic({
					id: dynamic.id,
					status: status
				}).then(res => {}).catch(res => {
					this.$utils.toast(res);
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.AppraiseItem{
	border-bottom: 2rpx solid #F5F5F5;
	padding: 24rpx 0;
		/* 头像 */
	.u-nickname__img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
	}
 .title{ 
	 font-size: 28rpx;
	 color: gray;
	 line-height: 33rpx;
	 display: inline-block;
	 text-align: left;
	 font-style: normal;
	 text-transform: none;
	 padding-top: 24rpx;
 }
 .group{
	 display: flex;
	  flex-wrap: wrap; /* 允许换行 */
	  justify-content: flex-start;
	  margin-top: 16rpx;
 }
 
 .groupImg{
	 width: 148rpx;
	 height: 148rpx;
	 border-radius: 24rpx;
	 overflow: hidden;
	 margin-right: 26rpx;
	 margin-bottom: 26rpx;
	 .img{
		 width: 100%;
		 height: 100%;
		 object-fit: cover;
	 }
 }
 .thorui-flex__between{
	display: flex;
	justify-content: space-between;
	align-items: center;
 }
 .times{
	width: 100rpx;
 }
 .time{ 
	 font-weight: 500;
	 font-size: 24rpx; 
	 color: #999999;
	 line-height: 23rpx;
	 text-align: left;
	 font-style: normal;
	 text-transform: none;
 }
}
	 
</style>